<template>
	<view class="yz">
		<view class="Card flex flex-col ali-cen padd20 mt20">
			<view class="card-hd wid1p flex just-spa-bet ali-cen">
				<!-- 头部 -->
				<view class="hd-info flex just-spa-bet ali-cen">
					<image :src="data_list.UserInfo[0].avatar ? data_list.UserInfo[0].avatar : 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'"
					 class="yicon-lg radius50p mr20" mode="scaleToFill" @click="OnPersionPublish(data_list)"></image>
					<view class="info">
						<view class="">{{ data_list.UserInfo[0].Nickname || '洋盘小主:' }}</view>
						<text class="fo-gray fo-24">{{ $tool.friendlyDate(new Date(data_list.PublishTime)) }}</text>
					</view>
				</view>
				<view class="hd-optera rotate-90 self-start"><text class="cuIcon-more fo-40" @click="onMore"></text></view>
			</view>
			<!-- 文字部分 -->
			<text class="card-content wid1p mt20 pl94 pr50 maxHeight" :class="{lookAll:data_list.isLookAll}" selectable="true"
			 style="line-height: 24px;">
				{{ data_list.contents }}
			</text>
			<view class="relative wid1p pl94 mt20">
				<text class="fo-blue" style="margin-bottom: -50rpx;" v-if="data_list.contents.length>50 &&data_list.isLookAll===false"
				 @click="onLookAll(data_list._id)">展开全文</text>
			</view>


			<!-- 图片部分  视频图片不可同事存在-->
			<view class="card-imgList wid1p" v-if="data_list.PushType === 'img/text'">
				<imgList class="mt20" :imgJsonList.sync="data_list.imgList"></imgList>
			</view>
			<!-- 视频部分 -->
			<view class="card-imgList wid1p" v-if="data_list.PushType === 'video/text'" @click="$pub.naviTo('/pages/community/videoPlayer')">
				<videoCover class="mt20" :VideoInfo.sync="data_list.videoList[0].tempFileURL"></videoCover>
			</view>
			<!-- 录音部分 -->
			<view class="self-start pl94 mt40 flex ali-cen fo-white" v-if="data_list.PushType === 'audio/text'" @click="onAudio(data_list.audioList)">
				<view class="RecordAudio radius20 flex just-spa-bet ali-cen" style="background-color: skyblue; width: 400rpx;height: 80rpx;">
					<view class="ml30">
						<view v-if="!data_list.isPlayAudio_ing"><text class="cuIcon-playfill"></text></view>
						<view v-else><text class="cuIcon-stop fo-40"></text></view>
						<!-- <view v-if="!isPlay">点击播放</view>
						<view v-else>播放中</view> -->

					</view>
					<!-- 播放次数：{{testDiaoYong}} -->
					<text class="font-wei600 mr30">{{data_list.audioList.duration}}S</text>
				</view>

			</view>

			<!-- 底部评论点赞部分 -->
			<view class="card-foot flex just-spa-bet ali-cen paddtb40 pl20">

				<text class="cuIcon-share fo-40" @click="onShare(data_list)"></text>
				<view class="flex ali-cen">
					<view class="flex ali-cen paddlr20">
						<!-- <text class="fo-40 mr10" :class="data_list.iSlike ? 'cuIcon-likefill' : 'cuIcon-like'"></text> -->
						<like-toggle size="16" @change="onLike" :iSlike="data_list.iSlike" :_id='data_list._id'></like-toggle>
						<text v-if="data_list.likeList">{{ data_list.likeCount }}</text>
					</view>
					<view class="flex ali-cen paddlr20" @click="onCommon(data_list._id)">
						<text class="cuIcon-community fo-40 mr10"></text>
						<text v-if="data_list.CommonList">{{ data_list.CommonList.length }}</text>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	// var innerAudioContext = null // 创建并返回内部 audio 上下文
	// var fileID = 'fitstLoad'		// 用来控制单一播放音频

	import {
		mapGetters
	} from 'vuex';
	import imgList from './imgList.vue';
	import videoCover from './videoCover.vue';
	import likeToggle from '../../../common/components/like-toggle/index.vue';

	import {
		API$like
	} from '../../../common/API/community.js';
	export default {
		props: {
			articleList: {
				type: Object,
				default () {
					return {};
				}
			}
		},
		name: 'card',
		components: {
			imgList,
			videoCover,
			likeToggle,
		},
		computed: {
			...mapGetters(['GET_innerAudioContext', 'GET_AudioFileID']),
			testDiaoYong() {
				return this.articleList.testDiaoYong
			},
		},
		data() {
			return {
				data_list: []
			};
		},
		watch: {
			articleList: {
				handler(n, o) {
					this.data_list = JSON.parse(JSON.stringify(this.articleList));
				},
				deep: true
			}

		},
		created() {
			this.data_list = JSON.parse(JSON.stringify(this.articleList));
		},
		onUnload() {
			this.$store.commit('DestroyAudio') // 销毁实例
		},
		methods: {
			onMore() {
				uni.$emit('$onCommunity', {
					isShow: true,
					type: "onMore"
				});
				uni.hideTabBar({
					animation: true
				});
			},
			onShare(data) {
				uni.$emit('$onCommunity', {
					isShow: true,
					type: "onShare",
					data: data
				});
				uni.hideTabBar({
					animation: true
				});
			},
			// 点赞
			async onLike(CurrenState, e) {
				if (CurrenState === '请不要频繁点赞') return
				let {
					code,
					msg,
					iSlike
				} = await API$like({
					_id: e, // 这个id是该文章的id
					UserId: this.$pub.getStorageSync('UserInfo')._id // 这个id是用户的id
				});
				if (code === 200 && iSlike) {
					uni.$emit('FreshArticleList', {
						CallType: 'changeLike',
						state: true,
						ArticleId: this.articleList._id
					}); // 这个id是文章id
				} else if (code === 200 && !iSlike) {
					uni.$emit('FreshArticleList', {
						CallType: 'changeLike',
						state: false,
						ArticleId: this.articleList._id
					}); // 这个id是文章id
				}
				this.$pub.Toast(msg);
			},
			// 评论
			onCommon(e) {
				this.$pub.naviTo(`/pages/community/common?ArticleId=${e}`);
			},
			// 查看个人发布信息
			OnPersionPublish(e) {
				this.$pub.naviTo(`/pages/other/myPublish/index?UserId=${e.UserId}`);
			},
			// 展开全文
			onLookAll(e) {
				uni.$emit('FreshArticleList', {
					CallType: 'resetLookAll',
					_id: e
				});
			},
			// 加载/播放/暂停音频
			onAudio(audioList) {
				/*
					因为我的录音播放管理器是全局的 每次切换录音都是 重新赋值Src 然后控制实例的播放和暂停
						那么我每个播放条（前端页面）都是一个组件  里面的isPlayAudio_ing是分开的，我在切换实例的时候同时我要控制每次组件的isPlayAudio_ing变化，以及倒计时
							所以我还要记录上一次点击播放的状态的isPlayAudio_ing 和状态倒计时
							
							我已经换成在主接口的数据添加isPlayAudio_ing字段 然后每次点击刷新回原来的字段了
				*/
				this.data_list.isPlayAudio_ing = !this.data_list.isPlayAudio_ing
				let oftenFn = () => {
					uni.$emit('FreshArticleList', {
						CallType: 'reset',
						_id: this.data_list._id
					})
					this.$store.commit('CHANGE_innerAudioContext', uni.createInnerAudioContext())
					this.$store.commit('SetAudioSrc', audioList.fileUrl)
					this.GET_innerAudioContext.onTimeUpdate(res => { // 监听播放进度
						let durationS = Math.floor(this.articleList.audioList.duration - this.GET_innerAudioContext.currentTime)
						this.data_list.audioList.duration = durationS <= 0 ? 0 : durationS
					});
					this.GET_innerAudioContext.onEnded(res => {
						console.log('监听音频自然播放完成事件', this.GET_innerAudioContext);
						this.data_list.isPlayAudio_ing = false;
						this.data_list.audioList.duration = this.articleList.audioList.duration
					});
				}


				if (this.GET_AudioFileID === audioList.fileID) {
					console.log('已经点击过一次播放，再点击就是同一个实例了', this.GET_innerAudioContext)
				} else if (this.GET_AudioFileID === 'fitstLoad') {
					console.log('第一次加载')
					oftenFn()
				} else {
					console.log('第一次加载后再点击其他的音频（离开了当前的实例')
					this.$store.commit('DestroyAudio')
					oftenFn()
				}


				this.data_list.isPlayAudio_ing ? this.$store.commit('PlayAudio') : this.$store.commit('PauseAudio')
				this.$store.commit('CHANGE_fileID', audioList.fileID)
			}
		}
	};
</script>

<style lang="less" scoped>
	.Card {
		width: 100%;
	}

	.card-content {
		// text-indent: 2em;
	}

	.card-foot {
		align-self: flex-end;
		width: 89%;
	}

	// 展开全部
	.maxHeight {
		max-height: 200rpx;
		overflow: hidden;
	}

	.lookAll {
		max-height: none;
	}
</style>
